<template>
  <div>
    <FilterTable
      ref="table"
      selectionType="single"
      height="auto"
      :columns="columns"
      :datakey="'rows'"
      :onRowSelectChange="arr => (this.onSelectCell = arr)"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button type="primary" @click="refund()">退 款</el-button>
      <el-button @click="closeDialog(true)">取 消</el-button>
    </div>
    <BaseDialog :visible.sync="showRemark" title="退款备注" width="400px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <el-input v-model="formList.remark" type="textarea" class="inputtextarea" rows="3" placeholder />
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'center'
        }"
      >
        <el-button type="primary" @click="remarkRefund()">退款确认</el-button>
        <el-button @click="closeRemark(true)">取 消</el-button>
      </div>
    </BaseDialog>
    <BaseDialog :visible.sync="showPOSCode" title="" width="600px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <el-input v-model="formList.remarkPOS" type="textarea" class="inputtextarea" rows="1" style="min-height: 31px;font-size:36px" readonly
    /></BaseDialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { queryDmsPayingMain, refundAmountByTradeId, queryPayResult } from '@/api/finance/repair/receivables';

export default {
  name: 'QRCodeOff',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.BaseTable = null;
    return {
      // 定义定时器
      timerNext: null,
      formList: [],
      onSelectCell: [],
      insureDetailList: [],
      index: null,
      columns: this.createTableColumns(),
      dataId: null,
      showPOSCode: false,// pos机退款提示弹框
      showRemark: false  // 备注弹框

    };
  },
  computed: {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '平台交易单号',
          dataIndex: 'TRADE_ID',
          sorter: true
        },
        {
          title: '结算单号',
          dataIndex: 'BALANCE_NO_ALL',
          sorter: true
        },
        {
          title: '退款金额',
          dataIndex: 'AMOUNT',
          sorter: true
        },
        {
          title: '支付方式',
          dataIndex: 'PAY_TYPE_NAME',
          sorter: true
        },
        {
          title: '支付代码',
          dataIndex: 'PAY_TYPE_CODE',
          sorter: true,
          hidden: true
        },
        {
          title: '交易时间',
          dataIndex: 'TRADE_DATE',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        }
      ];
    },
    openModel(balanceNo) {
      console.log('balanceNo:' + balanceNo);
      this.initSearch(balanceNo);
    },
    // 明细 请求
    async initSearch(balanceNo) {
      let res = await queryDmsPayingMain(balanceNo);
      if (res.data.length > 0) {
        this.insureDetailList = res.data;
        this.BaseTable.EXECUTE_INSERT(this.insureDetailList);
      }
    },
    // 退款
    refund() {
      if (this.onSelectCell.length == 1 && this.onSelectCell[0].BALANCE_NO_ALL.split(',').length === 1) {
        let map = this.onSelectCell[0];
        this.formList.remark = ''
        this.formList = { remark: '' }
        this.showRemark = true;
      } else {
        this.$notify.error({ title: '提示信息', message: '请选择一条正确数据！' });
      }
    },
    // 退款确认
    remarkRefund() {
      let remark = this.formList.remark;
      if (remark === undefined || remark === '' || remark === null) {
        this.$notify.error({ title: '提示信息', message: '请填写退款备注！' });
        return;
      }
      let map = this.onSelectCell[0];
      let params = { payTypeCode: map.PAY_TYPE_CODE, tradeId: map.TRADE_ID, amount: map.AMOUNT, remark: map.BALANCE_NO_ALL, ownerCode: map.OWNER_CODE, remark };
      this.refundAmount(params);
    },
    // 退款确认关闭
    closeRemark(val) {
      this.showRemark = false;
    },
    // 退款查询
    async refundAmount(params) {
      const res = await refundAmountByTradeId(params);
      let typeCode = params.payTypeCode;
      console.log("支付类型typeCode:" + typeCode)
      if (res.resultCode === 200) {
        if (res.data.isSuccess === '1' || res.data.isSuccess === '2') {
          if (typeCode === 'QRCP') {
            this.closeRemark(true);
            this.closeDialog(false);
            this.$notify.success({ title: '提示信息', message: res.data.message });
          }
          if (typeCode === 'POSP') {
            this.formList.remarkPOS = 'POS机正在退款中,请稍后'
            this.showPOSCode = true
            this.startSetInterval(res.data.tradeId);
          }
        }
      }
    },
    // 5秒查询一次支付结果
    async queryPay(tradeId) {
      const res = await queryPayResult(tradeId);
      if (res.resultCode === 200) {
        console.log('isSuccess : ' + res.data.isSuccess);
        console.log('5秒查询一次支付结果message : ' + res.data.message);
        if (res.data.isSuccess === '1') {
          this.endClearInterval();
          this.showPOSCode = false
          this.closeRemark(true);
          this.closeDialog(false);
          this.$notify.success({ title: '提示信息', message: "退款成功" });
        }
      }
    },
    // 定时器每5秒执行一次执行5分钟
    startSetInterval(tradeId) {
      var i = 1;
      let that = this;
      this.timerNext = setInterval(function () {
        that.queryPay(tradeId);
        console.log('5秒执行一次:' + i);
      }, 5000);
    },
    // 关闭定时器
    endClearInterval() {
      clearInterval(this.timerNext);
      console.log('关闭5秒查询一次的定时器:' + this.timerNext);
    },
    closeDialog(val) {
      this.$emit('close', val);
    }
  }
};
</script>

<style lang="less" scoped></style>
